<template>
    <view class="upper">
        <view class="picture">
            <view class="">头像</view>
            <view class="right">
                <image class="image" :src="userProfile.avatar" mode=""></image>
                <wd-icon name="arrow-right" size="22px"></wd-icon>
            </view>
        </view>
        <view class="phone">
            <view class="">手机号</view>
            <view class="">{{ userProfile.mobile }}</view>
        </view>
        <view class="phone nickname">
            <view class="">昵称</view>
            <view class="">{{ userProfile.nickname }}</view>
        </view>
    </view>
</template>

<script setup>
import { user } from '@/api/index.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
const userProfile = ref({});
onLoad(() => {
    userInfo(); //获取用户信息
});
// 获取用户信息
const userInfo = async () => {
    const ret = await user();
    if (ret.code == 1) {
        userProfile.value = ret.data;
    } else {
        utils('数据加载失败！');
    }
};
</script>

<style lang="scss" scoped>
.upper {
    .phone {
        height: 110rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 2rpx #efefef;
    }
    .nickname {
        border: none;
    }
    .picture {
        .right {
            .image {
                width: 111rpx;
                height: 108rpx;
                margin-right: 14rpx;
            }
            display: flex;
            align-items: center;
        }
        height: 172rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 2rpx #efefef;
    }
    padding: 0 40rpx;
    color: #333333;
}
</style>
